<template>
  <div>
    <van-row class="search-bar">
      <van-col span="3" class="icon-box">
        <span class="iconfont icon-cart"></span>
      </van-col>
      <van-col span="16" class="search-input">
        <input type="text" placeholder="查找">
      </van-col>
      <van-col span="5">
        <van-button size="mini">查找</van-button>
      </van-col>
    </van-row>
    <!--swipwer area-->
    <div class="swiper-area" v-if="banner">
        <van-swipe :autoplay="2000">
            <van-swipe-item v-for="(banner,index) in banner" :key="index">
              <img v-lazy="banner.image"/>
            </van-swipe-item>
        </van-swipe>
    </div>
    <!-- type bar -->
    <div class="type-bar">
      <div v-for="(category,index) in category" :key="index" class="bar-item">
        <img v-lazy="category.image" :alt="category.mallCategoryName">
        <span>{{ category.mallCategoryName }}</span>
      </div>
    </div>
    <!-- ad banner -->
    <div class="ad-banner">
      <img v-lazy="adBanner" alt="">
    </div>
    <!-- product recommend area -->
    <div class="recommend-box">
      <div class="recommend-title">
        商品推荐
      </div>
      <div class="recommend-body">
        <swiper :options="swiperOption">
          <swiper-slide v-for=" (item ,index) in productRecommend" :key="index">
              <div class="recommend-item">
                <img :src="item.image" width="100%" />
                <div class="text">{{item.goodsName}}</div>
                <div>￥{{item.price | moneyFilter}}</div>
              </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <indexFool :floorData="floor1" :floorTitle="floorName.floor1"></indexFool>
    <indexFool :floorData="floor2" :floorTitle="floorName.floor2"></indexFool>
    <indexFool :floorData="floor3" :floorTitle="floorName.floor3"></indexFool>
    <!--Hot Area-->
    <div class="hot-area">
        <div class="hot-title">热卖商品</div>
        <div class="hot-goods">
          <!--这里需要一个list组件-->
          <van-list>
            <van-row gutter="20">
              <van-col span="12" v-for="( goodsItem, index) in hotGoods" :key="index">
                <goods-info  :goodsId="goodsItem.goodsId" :goodsImage="goodsItem.image" :goodsName="goodsItem.name" :goodsPrice="goodsItem.price"></goods-info>
              </van-col>
            </van-row>
          </van-list>
        </div>
    </div>
  </div>
</template>

<script>
import { toMoney } from 'components/filter/filter'
import goodsInfo from 'components/commonComponent/goodInfo'
import indexFool from 'components/commonComponent/indexFool'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import url from 'components/serviceApi/serviceApi'
import 'swiper/dist/css/swiper.css'
export default {
  data () {
    return {
      msg: 'test',
      // 轮播
      banner: [],
      // 导航
      category: [],
      // 动态banner
      adBanner: '',
      // 商品推荐
      productRecommend: [],
      swiperOption: {
        slidesPerView: 3,
        loop: true
      },
      floor1: [], // 楼层1
      floor2: [], // 楼层2
      floor3: [], // 楼层3
      floorName: {}, // 楼层标题
      hotGoods: [] // 热卖商品
    }
  },
  components: {
    swiper,
    swiperSlide,
    indexFool,
    goodsInfo
  },
  filters: {
    moneyFilter (money) {
      return toMoney(money)
    }
  },
  created () {
    let vm = this
    vm.$http.post(url.getIndexData).then(response => {
      console.log(response)
      if (response.status === 200) {
        console.log(this)
        vm.banner = response.data.data.slides
        vm.category = response.data.data.category
        vm.adBanner = response.data.data.advertesPicture.PICTURE_ADDRESS
        this.productRecommend = response.data.data.recommend
        this.floorName = response.data.data.floorName
        this.floor1 = response.data.data.floor1
        this.floor2 = response.data.data.floor2
        this.floor3 = response.data.data.floor3
        this.hotGoods = response.data.data.hotGoods
      }
    }).catch(error => {
      console.log(error)
    })
  }
}
</script>

<style scoped lang="less">
  @import '~common/less/variable';
  @import '~common/less/mixin';
  .search-bar {
    font-size: .4rem;
    display: flex;
    height: 1rem;
    align-items: center;
    background-color: #e5017d;
    .search-input {
      .border-1px(#fff);
      input {
        .border-1px(#fff);
        background-color: #e5017d;
        width: 100%;
        height: 0.6rem;
      }
    }
    .icon-box {
      display: flex;
      justify-content: center;
      .icon-cart {
        font-size: 0.6rem;
        color: #fff;
      }
    }
  }
  .swiper-area {
    min-height: 4.3rem;
  }
  .type-bar {
    background-color: #fff;
    font-size: 14px;
    border-radius: 0.3rem;
    padding: 0 0.2rem 0.2rem 0.2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    .bar-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0.2rem;
      font-size: 12px;
    }
  }
  .recommend-box {
    background-color: #fff;
    margin-top: 0.3rem;
    .recommend-title {
      .border-1px(#eee);
      font-size: 14px;
      color: #e5017d;
      font-weight: 700;
      padding: .2rem;
    }
    .recommend-item {
      display: flex;
      align-content: center;
      justify-content: center;
      flex-direction: column;
      padding: 0.2rem;
      font-size: 12px;
      border-right: 1px solid #eee;
      border-bottom: 1px solid #eee;
      text-align: center;
      .text {
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
  }
  .hot-area{
    text-align: center;
    font-size:14px;
    height: .8rem;
    line-height:.8rem;
    background-color: #eee;
  }
</style>
